<template>
    <div class="pay">
        <div id="ue">
        <h1>应付金额：<span style="color:#f00">￥{{totalPrice}}元</span></h1>
        <p>订单编号：{{orderId}}</p>
   
    </div>
    <div id="contentCon">
        <p>请选择您的支付方式</p>
    <ul>
    	<li class="box01">
        	<input type="radio">
            <i><img src="../../../images/zhifubao.png"></i>
        </li>
        <li class="box02">
            <p>扫描使用手机端支付宝</p>
        	<img src="../../../images/erweima_06.png">
        </li>
    </ul>
    <ul>
    	<li class="box01">
        	<input type="radio">
            <i class="pic02"><img src="../../../images/weixin.png"></i>
            
        </li>
        <li class="box02">
            <p>请使用微信扫描二维码</p>
        	<img src="../../../images/erweima_06.png">
        </li>
    </ul>
    <ol>
    	<li>
        	<input type="radio">
            <i><img src="../../../images/yinglian.png"></i>
            <p>请使用银联支付</p>
        </li>
    	<li class="box03">
        	<img src="../../../images/logo_03.jpg">
            <img src="../../../images/logo_05.jpg">
            <img src="../../../images/logo_07.jpg">
        </li>
    </ol>
</div>
<p>
        <el-button @click="$router.push('personal')">取消</el-button>
        <el-button @click="pay">立即支付</el-button>
    </p>
</div>
</template>
<style lang="scss" scoped>
.pay p{
    text-align: center;
}
#ue p{
    text-align: center;
}
#ue {
    text-align: center;
}
 #contentCon p{
    font-size: 25px;
    text-align: center;
    font-family: "微软雅黑"
 }
   #contentCon{
	width:80%;
	margin:auto;
	margin-top:40px;}
//  #contentCon>div{
// 	overflow:hidden;}
// #contentCon>div>span{
// 	float:left;}
// #contentCon>div>span>h2{
// 	font-size:24px;
// 	color:#4c4c4c;
// 	font-weight:bold;}
 #contentCon>div>span>p{
 	font-size:18px;
 	color:#4c4c4c;
	margin-top:10px;} 
#contentCon>div>ol{
	float:right;
	overflow:hidden;
	margin-top:10px;}
#contentCon>div>ol>p{
	font-size:24px;
	color:#4c4c4c;
	float:left;}
#contentCon>div>ol>span{
	float:left;
	font-size:24px;
	color:#fb0000;}
#contentCon>ul{
	margin-top:40px;
	width:1200px;
	height:320px;
	width:100%;
	height:250px;
	border-top:1px solid #d2d2d2;
    text-decoration:none;
    list-style:none;
	overflow:hidden;}
#contentCon>ul>li{
	float:left;
	overflow:hidden;
    font-family:"微软雅黑", "宋体", "黑体";
    font-weight:normal;}
#contentCon>ul>.box01{
	margin-top:18px;
	margin-left:40px;
	// margin-top:18px;
	// margin-left:40px;
	overflow:hidden;}
    
    #contentCon>ul>.box02>p{
        font-size: 16px;
        font-family: "微软雅黑";
    }
#contentCon>ul>.box02{
	margin-top:50px;
	margin-left:170px;}
   #contentCon>ul>.box02{
        margin-top: 0px;
       
  }
#contentCon>ul>li>input{
	float:left;
	width:16px;
	height:16px;
	margin-top:22px;}
#contentCon>ul>li>i{
	float:left;
	width:71px;
	height:71px;
	margin-left:24px;}
#contentCon>ul>li>.pic02{
	width:78px;
	height:69px;}
#contentCon>ul>li>div{
	float:left;
	width:260px;
	height:260px;
	border:1px solid #d2d2d2;
	background:url(../../../images/erweima.png) center no-repeat;}
#contentCon>ul>li>span{
	float:left;
	width:507px;
	height:167px;
	// background:url(../../../images/buy_03.jpg) center no-repeat;
	margin-top:48px;
	text-align:center;}
#contentCon>ul>li>span>p{
	font-size:24px;
	color:#4c4c4c;
	margin-top:50px;}
#contentCon>ul>li>span>.text02{
	margin-top:20px;}
#contentCon>ol{
	width:1200px;
	height:320px;
	border-top:1px solid #d2d2d2;
	margin-top:40px;}
#contentCon>ol>li{
	overflow:hidden;
	margin-top:50px;
	margin-left:40px;}
    #contentCon>ol>li>p{
        font-size: 16px;
        font-family: "微软雅黑";
    }
#contentCon>ol>li>input{
	float:left;
	width:16px;
	height:16px;
	margin-top:22px;}
#contentCon>ol>li>i{
	float:left;
	width:89px;
	height:57px;
	margin-left:24px;}
#contentCon>ol>.box03{
    position:absolute;
    left: 40%;
	margin-top:30px;
width: 337px;
height: 250px;}

// #contentCon>ol>li>#logo02{
// 	margin:0 70px;}

</style>
<script>
export default {
    name: 'pay',
    data(){
        return {
            totalPrice:0,
            orderId:''
        }
    },
    created(){
        console.log(this.$route.query);
        this.totalPrice = this.$route.query.data
        this.orderId = this.$route.query.orderId
    },
    methods:{
        pay(){
            let id = this.orderId
            this.axios.defaults.headers.common['Authorization'] = localStorage.getItem('token')
            this.axios.put('/api/editOrder' ,{params:{orderId:id,state:1}})
                .then(res => {
                    this.$message('支付成功!')
					this.$router.push({path:'/personal/myorder'})
                })
        }
    }
}
</script>